<template>
	<view class="container">


		<view class="carousel-section">
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing"></view>
			<!-- 背景色区域 -->
			<!-- <view class="titleNview-background" :style="{backgroundColor:titleNViewBackground}"></view> -->
			<view class="banner">
				<image :src="banner" mode="widthFix" />
			</view>


		</view>
		<view class="navbar" :style="{position:headerPosition,top:headerTop}">
			<view class="nav-item" :class="{current: filterIndex === 0}" @click="tabClick(0)">
				综合排序
			</view>
			<view class="nav-item" :class="{current: filterIndex === 2}" @click="tabClick(2)">
				<text>价格排序</text>
				<view class="p-box">
					<text :class="{active: priceOrder === 1 && filterIndex === 2}" class="yticon icon-shang"></text>
					<text :class="{active: priceOrder === 2 && filterIndex === 2}" class="yticon icon-shang xia"></text>
				</view>
			</view>

			<view class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1)">
				分类查看
			</view>

		</view>


		<scroll-view scroll-y="true">
			<view class="times">
				<text>活动截止：</text>
				<view class="bb">
					{{day}}
				</view>
				<text>天</text>
				<view class="bb">
					{{hours}}
				</view>
				<text>:</text>
				<view class="bb">
					{{minutes}}
				</view>
				<text>:</text>
				<view class="bb">
					{{seconds}}
				</view>
			</view>
			<view class="list">
				<view class="mone">
					<view class="li" v-for="goods in goodsList" :key="goods.id" @click="navToDetailPage(goods)">
						<view class="imgbox">
							<image :src="goods.defaultAlbum" mode="widthFix"></image>

						</view>
						<view class="text">
							<view class="h1">
								{{goods.pName}}
							</view>
							<view class="txt">
								销量:{{goods.iSales}}件
							</view>
							<view class="ts">
								<image :src="goods.tagImgUrl" mode="widthFix" class="uimg"></image>
							</view>
							<view class="p">
								<text>会员价：¥{{goods.fSalePrice}}</text>
								<navigator class="butt">
									<image src="/static/img/2/2-19.png" mode="widthFix"></image>
								</navigator>
							</view>
						</view>
					</view>

				</view>
			</view>


		</scroll-view>
		<uni-drawer :visible="drawer" mode="right" @close="closedd">

			<view style="padding:0 30upx;">
				<view class="uni-title condition-title">全部分类</view>
				<view class="condition">
					<view class="pp-list" v-for="cate in Allcate" :key="cate.id" :class="cate.isSelected?'active':''" @click="Selected(cate)">{{cate.cName}}</view>

				</view>
			</view>
			<view style="padding:0 30upx;">
				<view class="submit">
					<view class="btn" @click="refreshData">重置</view>
					<view class="btn active" @click="submitData">提交</view>
				</view>
			</view>
		</uni-drawer>
		<!-- 分享 -->
		<share ref="share" :contentHeight="900" :shareList="shareList"></share>
	</view>
</template>

<script>
	import Guess from "@/components/like/guess2.vue"
	import share from '@/components/share';
	export default {
		components: {
			Guess,
			share
		},
		data() {
			return {
				titleNViewBackground: 'none',
				swiperCurrent: 0,
				swiperLength: 3,
				shareList: [],
				banner: '',
				promotionId: '',
				promotionData: {},
				day: "--",
				hours: "--",
				minutes: "--",
				seconds: "--",
				timer: null,
				cateMaskState: 0, //分类面板展开状态
				headerPosition: "static",
				headerTop: "0px",
				loadingType: 'more', //加载更多状态
				filterIndex: 0,
				cateId: '', //已选三级分类id
				ppid: '', //品牌id
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				goodsList: [],
				current: 1,
				drawer: false,
				ppList: [],
				Allcate: [],
				did: 0,
				lowPrice: '',
				heightPrice: '',
				price: '',
				catelist: [],
				flag: 0


			};
		},

		async onLoad(options) {
			// this.loadData();
			var itemdata = this.$SysCache.get('itemData')
			this.shareList = await this.$api.json('shareList');
			this.banner = itemdata.image
			this.promotionId = itemdata.id
			this.promotionData = itemdata
			this.timeDown()
			this.loadData(0);
		},

		methods: {
			
			loadData(sid) {
				let that = this;
				let token = that.$SysCache.get('token');
				this.did = sid
				let orders = []
				if (sid == 0) {
					let ord = {
						fieldname: "iOrder",
						direction: "asc"
					}
					orders.push(ord)

				} else if (sid == 1) {
					let ord = {
						fieldname: "fSalePrice",
						direction: "asc"
					}
					orders.push(ord)
				} else if (sid == 2) {
					let ord = {
						fieldname: "fSalePrice",
						direction: "desc"
					}
					orders.push(ord)
				}
				this.$Request.post(
					this.$api.httpApi.search.search + "&token=" + this.$SysCache.get('token'), {
						queryCondition: {
							order: orders,
							pageindex: this.current,
							pagesize: 12,
							where: [{
									fieldname: "promotionActivityId",
									valuefrom: "GP" + (this.promotionData.id)
								},
								{
									fieldname: "categoryid",
									valuefrom: this.cateId
								}
							]
						}
					}
				).then(res => {
					if (res.code == 200) {

						this.goodsList = res.data.data
						if (that.flag == 0) {
							that.$Request.get(
								that.$api.httpApi.cate.cate + "&token=" + that.$SysCache.get('token')

							).then(rest => {
								if (rest.code == 200) {

									that.catelist = rest.data

									that.forList(that.goodsList, that.catelist)

									that.flag++

								}
							})
						}


					}
				})
			},
			forList(str, stu) {
				let that = this
				str.forEach((temp, num) => {
					stu.forEach((item, index) => {
						if (item.id == temp.oProductClass_id && that.Allcate.indexOf(item) == -1) {
							that.Allcate.push(item)
						}
						if (item.lsChildClass.length > 0) {
							that.forList(str, item.lsChildClass)
						}
					})
				})
			},
			//详情页
			navToDetailPage(item) {
				//测试数据没有写id，用title代替
				let id = item.pid;
				uni.navigateTo({
					url: `/pages/detail/index?id=${id}`
				})
			},
			timeDown() { // 倒计时
				clearInterval(this.timer);
				var starttime = new Date(this.promotionData.dStartDate.replace(/-/g, "/")) / 1000;
				var nowDate = Math.round(new Date() / 1000); // 当前时间
				//var endtime = Number(this.initActiveMsgObj.end_time); 
				var endtime = new Date(this.promotionData.dEndDate.replace(/-/g, "/")) / 1000;
				// endtime = Math.round(new Date('2019/7/10 14:56:00') / 1000); + 60;
				if (endtime < nowDate) {
					return
				}


				var totalSeconds = parseInt((endtime - nowDate)); // 相差的总秒数
				//天数
				var days = Math.floor(totalSeconds / (60 * 60 * 24));
				//取模（余数）
				var modulo = totalSeconds % (60 * 60 * 24);
				//小时数
				var hours = Math.floor(modulo / (60 * 60));
				hours = hours < 10 ? ('0' + hours) : hours;
				modulo = modulo % (60 * 60);
				//分钟
				var minutes = Math.floor(modulo / 60);
				minutes = minutes < 10 ? '0' + minutes : minutes;
				// console.log(minutes)
				//秒
				var seconds = modulo % 60;
				seconds = seconds < 10 ? '0' + seconds : seconds;
				// console.log(seconds);
				//输出到页面
				this.day = days
				this.hours = hours
				this.minutes = minutes
				this.seconds = seconds
				// this.seconds = seconds + ':' + minutes + ':' + seconds;
				// console.log(days + "天" + hours + "时" + minutes + "分");
				//if(totalSeconds <= 0){
				if (totalSeconds <= 60) {
					clearInterval(this.timer);
					// window.location.reload()
				} else {
					this.timer = setInterval(this.timeDown, 1000);
				}






			},
			//筛选点击
			tabClick(index) {
				this.current == 1
				if (index == 1) {
					this.drawer = true
				}
				if (this.filterIndex === index && index !== 2) {

					return;
				}
				this.filterIndex = index;
				if (index === 2) {
					this.priceOrder = this.priceOrder === 1 ? 2 : 1;
					this.loadData(this.priceOrder)
				} else {
					this.loadData(0)
					this.priceOrder = 0;
				}
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})

				uni.showLoading({
					title: '正在加载'
				})

			},
			closedd() {
				this.drawer = false
			},
			Selected(item) {
				item.isSelected = !item.isSelected
			},
			refreshData() {
				this.lowPrice = ''
				this.heightPrice = ''
				for (const i of this.ppList) {
					i.isSelected = false
				}
				for (const s of this.Allcate) {
					s.isSelected = false
				}
			},
			submitData() {
				let str = []
				for (const d of this.Allcate) {
					if (d.isSelected) {
						str.push(d.id)
					}
				}
				this.cateId = str.join(",")
				this.loadData(0)
				this.closedd()
			},

		},
		onNavigationBarButtonTap(e) {
			// console.log(e)

			this.$refs.share.toggleMask();


		}

	}
</script>

<style lang="scss">
	.h1 {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.checked {
		position: relative;
	}

	.checked .checkbox {
		width: 37rpx;
		height: 37rpx;
		border: 2rpx solid #999;
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		border-radius: 50%;
	}

	.checked .checkbox image {
		width: 35rpx;
		height: 35rpx;
		display: none;
	}

	.act .checkbox image {
		display: block;
	}




	.mone .text {
		width: calc(100% - 235rpx - 1px);
		display: inline-block;
		vertical-align: middle;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(77, 77, 77, 1);
		padding: 25rpx;
		// height: 240rpx;
	}

	.mone .text .txt {
		font-size: 16rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		margin-top: 8rpx;
		color: rgba(136, 136, 136, 1);
	}

	.mone .text .ts {
		width: 89rpx;
		// height:31rpx;
		// background:rgba(77,200,151,1);
		// border-radius:16rpx;
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 31rpx;
		text-align: center;
		margin-top: 6rpx;
	}

	.mone .text .ts .uimg {
		width: 100upx;

	}

	.mone .p {
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(240, 64, 111, 1);
		margin-top: 10rpx;
	}

	.mone .p text {
		font-size: 30rpx;
		margin-right: 12rpx;
	}

	.mone .p .op {
		color: #999999;
		text-decoration: line-through;
	}

	.mone .p .butt {
		display: inline-block;
		vertical-align: middle;
		text-align: center;
		float: right;
	}

	.mone .p .butt image {
		display: inline-block;
		width: 28rpx;
	}

	.mone .nav {
		margin-top: 18rpx;
	}

	.mone .nav navigator {
		display: inline-block;
		width: 97rpx;
		height: 45rpx;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(240, 64, 111, 1);
		color: rgba(240, 64, 111, 1);
		text-align: center;
		font-size: 22rpx;
		line-height: 45rpx;
		border-radius: 23rpx;
	}

	.mone .nav .add {
		display: inline-block;
		float: right;
		width: 33rpx;
		margin-top: 10rpx;
	}

	.nav .add image {
		display: block;
		width: 100%;

	}

	.list {
		width: 90%;
		margin: auto;
		padding-top: 30rpx;
		position: relative;

	}

	.list .li {
		background: #fff;
		margin-bottom: 20rpx;
		position: relative;
	}

	.imgbox {
		width: 233rpx;
		height: 235rpx;
		display: inline-block;
		vertical-align: middle;
		text-align: center;
		line-height: 235rpx;
		border-right: 1px solid #EFEFEF;
		position: relative;
	}

	.imgbox .node {
		position: absolute;
		width: 100%;
		height: 48rpx;
		background: rgba(0, 0, 0, 0.77);
		left: 0;
		bottom: 0;
		text-align: center;
		line-height: 48rpx;
		font-size: 18rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}

	.imgbox image {
		max-width: 164rpx;
		display: inline-block;
		vertical-align: middle;
	}

	.top {
		height: 62rpx;
		background: #040000;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(231, 231, 231, 1);
		text-align: center;
		display: flex;
		line-height: 62rpx;
	}

	.top navigator {
		flex: 1;
		margin-left: 90rpx;
		margin-right: 90rpx;
	}

	.active {
		// border-bottom: 3rpx solid #F0406F;
		// color: #F0406F;
	}

	.times {
		text-align: center;
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		padding-top: 24rpx;
		padding-bottom: 30rpx;
	}

	.times text {
		display: inline-block;
		vertical-align: middle;
	}

	.times .bb {
		display: inline-block;
		vertical-align: middle;
		width: 44rpx;
		height: 44rpx;
		background: rgba(240, 64, 111, 1);
		border-radius: 50%;
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 44rpx;
		text-align: center;
		margin-left: 8rpx;
		margin-right: 8rpx;
	}

	.banner image {
		display: block;
		width: 100%;
		height: 100%;
	}

	page {

		background: #f5f5f5;

	}



	.m-t {
		margin-top: 16upx;
	}


	.tab-box {
		z-index: 10;
		position: fixed;
		background: #fff;
		width: 100%;
		top: 473upx;
		height: 86upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 90upx;
		font-size: 25upx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666;

		text {
			padding-bottom: 10upx;

		}

		.active {
			border-bottom: 2upx solid #4DC897;
			color: #4DC897;
		}

	}

	scroll-view {
		position: relative;
		// top: 500upx;
		overflow: hidden;
		z-index: 1;

		.guess-section {
			display: flex;
			flex-wrap: wrap;
			padding: 0 30upx;

			.guess-item {
				display: flex;
				flex-direction: column;
				width: 48%;
				padding-bottom: 29upx;
				background: #fff;
				margin-bottom: 21upx;

				&:nth-child(2n+1) {
					margin-right: 4%;
				}

			}

			.image-wrapper {
				width: 100%;
				height: 330upx;
				border-radius: 3px;
				overflow: hidden;
				background: #fff;

				image {
					width: 100%;
					height: 100%;
					opacity: 1;
				}
			}

			.title {
				font-size: 23upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(68, 68, 68, 1);
				line-height: 35upx;
				padding-left: 30upx;
				padding-right: 30upx;
			}

			.price {
				font-size: 26upx;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: rgba(240, 64, 111, 1);
				padding-left: 30upx;
				position: relative;

				.pay {
					font-size: 17upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
				}

				.collect {
					position: absolute;
					right: 29upx;
					bottom: 10upx;
					width: 30upx;
					height: 28upx;
					z-index: 1;
				}

			}


		}
	}

	/* 头部 轮播图 */
	.carousel-section {
		// position: fixed;
		top: 88upx;
		width: 100%;
		z-index: 10;

		.titleNview-placing {
			height: var(--status-bar-height);
			padding-top: 0upx;
			box-sizing: content-box;
		}


		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 856upx;
			transition: .4s;
		}
	}

	.carousel {
		width: 100%;
		height: 385upx;

		.carousel-item {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

		image {
			width: 100%;
			height: 100%;
		}
	}

	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60upx;
		bottom: 15upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;

		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}

	.navbar {
		// position: relative;
		left: 0;
		top: var(--window-top);
		display: flex;
		width: 100%;
		height: 80upx;
		background: #fff;
		box-shadow: 0 2upx 10upx rgba(0, 0, 0, .06);
		border-top: 1px solid rgba(238, 238, 238, .16);
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 25upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #000;
			position: relative;

			&.current {
				color: #4DC897;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120upx;
					height: 0;
					border-bottom: 4upx solid #4DC897;
				}
			}
		}

		.p-box {
			display: flex;
			flex-direction: column;

			.yticon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30upx;
				height: 14upx;
				line-height: 1;
				margin-left: 4upx;
				font-size: 26upx;
				color: #000;

				&.active {
					color: rgba(77, 200, 151, 1);
				}
			}

			.xia {
				transform: scaleY(-1);
			}
		}

		.cate-item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80upx;
			position: relative;
			font-size: 44upx;

			&:after {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1px solid #ddd;
				width: 0;
				height: 36upx;
			}
		}
	}

	.condition-title {
		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(55, 55, 55, 1);
		margin-top: 78upx;
	}

	.condition {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-top: 47upx;
		flex-wrap: wrap;

		.line {
			width: 74upx;
			height: 1upx;
			border: 1upx solid rgba(229, 229, 229, 1);
			margin: 0 31upx;
		}

		input {
			width: 176upx;
			height: 84upx;
			background: rgba(245, 245, 245, 1);
			border-radius: 42upx;
			display: inline-block;
			text-align: center;
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333;


		}

		.pp-list {
			width: 176upx;
			height: 84upx;
			background: rgba(245, 245, 245, 1);
			border-radius: 42upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(92, 92, 92, 1);
			margin: 0 22upx 22upx 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			padding: 0 10upx;

			&:nth-child(3n) {
				margin-right: 0;
			}

			&.active {
				background: #4DC897;
				color: #fff;
				border: 1upx solid #4DC897;
			}
		}


	}

	.submit {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 50upx;

		.btn {
			width: 224upx;
			height: 78upx;
			border: 1upx solid rgba(191, 191, 191, 1);
			border-radius: 39upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(92, 92, 92, 1);

			&.active {
				background: #4DC897;
				color: #fff;
				border: 1upx solid #4DC897;
			}
		}
	}
</style>
